---
title: Testing
description: Introducción al testing en Astro
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'


El testing te ayuda a escribir y mantener funcionando código de Astro. Astro soporta muchas herramientas populares para testing unitario, testing de componentes y testing end-to-end incluyendo Jest, Mocha, Jasmine, [Cypress](https://cypress.io) y [Playwright](https://playwright.dev). Puedes incluso instalar librerías de testing específicas para frameworks como React Testing Library para testear tus componentes de UI.

Los frameworks de testing te permiten declarar **assertions** o **expectations** sobre cómo debería comportarse el código en situaciones específicas, y luego comparar estos con el comportamiento actual de tu código.

## Vitest

Es un framework de testing unitario nativo de Vite con soporte a ESM, TypeScript y JSX powered by esbuild.

Utiliza el helper `getViteConfig()` de Astro en tu archivo de configuración [`vitest.config.ts`](https://vitest.dev/config/) para configurar Vitest con la configuración de tu proyecto de Astro:

```js
// vitest.config.ts
import { getViteConfig } from 'astro/config';

export default getViteConfig({
  test: {
    // Opciones de configuración de Vitest
  },
});
```

Mira [la plantilla de inicio Astro + Vitest](https://github.com/withastro/astro/tree/latest/examples/with-vitest) en GitHub.

## Cypress

Cypress es una herramienta front-end de testing hecha para la web moderna. Cypress te permite escribir tests end-to-end para tu sitio de Astro.

### Instalación

Puedes instalar Cypress utilizando el gestor de paquetes de tu elección.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install -D cypress
  ```

  Esto instalará Cypress localmente como una dependencia de desarrollo para tu proyecto.
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add cypress --save-dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add cypress --dev
  ```
  </Fragment>
</PackageManagerTabs>

### Configuración

En la raíz de tu proyecto, crea un archivo `cypress.config.js` con el siguiente contenido:

```js title="cypress.config.js"
import { defineConfig } from 'cypress'
export default defineConfig({
  e2e: {
    supportFile: false
  }
})
```

### Crea tu primer test de Cypress

1. Escoge una página para testear. Este ejemplo analizará la página de ejemplo `index.astro` de abajo.

    ```html title="src/pages/index.astro"
    ---
    ---
    <html lang="en">
      <head>
        <title>¡Astro es increíble!</title>
        <meta name="description" content="Trae contenido desde donde quieras y sírvelo rápidamente con la moderna arquitectura de islas de Astro." />
      </head>
      <body>
      <h1>Hola mundo desde Astro</h1>
      </body>
    </html>
    ```

2. Crea un archivo `index.cy.js` en la carpeta `cypress/e2e`. Usa el siguiente test en el archivo para verificar que el título de la página y el encabezado son correctos.

    ```js title="cypress/e2e/index.cy.ts"
    it('los titulos son correctos', () => {
      const page = cy.visit('http://localhost:4321');

      page.get('title').should('have.text', '¡Astro es increíble!')
      page.get('h1').should('have.text', 'Hola mundo desde Astro');
    });
    ```

    :::tip[Establecer una `baseUrl`]
    Puedes establecer [`"baseUrl": "http://localhost:4321"`](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress) en el archivo de configuración `cypress.config.ts` para usar `cy.visit("/")` en lugar de `cy.visit("http://localhost:4321/")` para una URL más conveniente.
    :::

### Ejecutando tus tests de Cypress

Cypress se puede ejecutar desde la línea de comandos o desde la App de Cypress. La App proporciona una interfaz visual para ejecutar y depurar tus tests.

Primero, inicia el servidor de desarrollo para que Cypress pueda acceder a tu sitio en vivo.

Para ejecutar nuestro test del ejemplo anterior usando la línea de comandos, ejecuta el siguiente comando:

```shell
npx cypress run
```

Alternativamente, para ejecutar el test usando la App de Cypress, ejecuta el siguiente comando:

```shell
npx cypress open
```

Una vez iniciada la App de Cypress, elige **E2E Testing** y luego selecciona el navegador que se usará para ejecutar los tests.

Una vez que se haya completado la ejecución del test, deberías ver marcas de verificación verdes en la salida que confirman que tu test pasó:

```shell title="Output de npx cypress run"
Running:  index.cy.ts                                                                     (1 of 1)
✓ los titulos son correctos (107ms)
1 passing (1s)
```

:::note[Falla el test]
Para verificar que tu test realmente funciona, puedes cambiar la siguiente línea en el archivo `index.astro`:

 ```astro title="src/pages/index.astro" del={2} ins={3}
  <body>
    <h1>Hola mundo desde Astro</h1>
    <h1>Hola desde Astro</h1>
  </body>
```

Luego ejecuta el test de nuevo. Deberías ver una "x" roja en la salida que confirme que tu test falló.
:::

### Siguientes pasos

Para más información sobre Cypress puedes visitar los siguientes enlaces:

- [Introducción a Cypress](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress)
- [Probando tu aplicación](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app)

## NightwatchJS

Nightwatch.js es un framework de automatización de tests con un conjunto poderoso de herramientas para escribir, ejecutar y depurar pruebas en la web con soporte integrado para todos los principales navegadores y sus equivalentes móviles, así como aplicaciones móviles nativas.

### Instalación

Puedes instalar NightwatchJS dentro de tu proyecto de Astro usando el gestor de paquetes de tu elección. Sigue los pasos de la CLI para elegir JavaScript/TypeScript, nombra tu carpeta de pruebas y selecciona si deseas incluir tests de componentes y pruebas en navegadores móviles.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm init nightwatch@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm dlx create-nightwatch
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn create nightwatch
  ```
  </Fragment>
</PackageManagerTabs>

### Crea tu primera prueba en Nightwatch

1. Elige una página para testear. Este ejemplo testeará la página de ejemplo `index.astro` que se muestra a continuación.

    ```html title="src/pages/index.astro"
    ---
    ---
    <html lang="en">
      <head>
        <title>¡Astro es increíble!</title>
        <meta name="description" content="Extrae contenidos de cualquier lugar y sírvelos rápidamente con la arquitectura de islas de última generación de Astro." />
      </head>
      <body></body>
    </html>
    ```

2. Crea una nueva carpeta `src/test/` y agrega el siguiente archivo de test:

		```js title="src/test/index.js"
		describe('Tests de Astro con Nightwatch', function () {
		    before(browser => browser.navigateTo('http://localhost:4321/'));

		    it("Verifica que el título sea correcto", function (browser) {
		        browser.assert.titleEquals('¡Astro es increíble!')
		    });

		    after(browser => browser.end());
		});
		```

    :::tip[Configura un `baseUrl`]
    Puedes configurar [`"baseURL": "http://localhost:4321"`](https://nightwatchjs.org/guide/reference/settings.html#setting-the-baseurl-property) en el archivo de configuración `nightwatch.conf.js` para utilizar `browser.navigateTo("/")` en lugar de `browser.navigateTo("http://localhost:4321/")` para una URL más conveniente.
    :::

### Ejecutando tus tests de NightwatchJS

Puedes ejecutar un solo test o varios tests a la vez, probando en uno o varios navegadores. Por defecto, los resultados de tus tests se mostrarán en la terminal. Opcionalmente, puedes abrir el Reporte de Pruebas HTML para mostrar un informe completo y filtrar los resultados de los tests.

Puedes ejecutar los tests con la [Extensión de Visual Studio Code para NightwatchJS](https://marketplace.visualstudio.com/items?itemName=browserstackcom.nightwatch) o siguiendo los pasos a continuación mediante la CLI:

1. Para ejecutar todos los tests, ingresa el siguiente comando en la terminal. Opcionalmente, incluye el nombre del archivo para ejecutar solo el test individual:

    ```sh
    npx nightwatch test/index.js
    ```

2. Para ver el Informe de Test HTML completo, ábrelo utilizando el siguiente comando:

    ```sh
    npx nightwatch test/index.ts --open
    ```

3. Para ejecutar los tests en un navegador específico, utiliza el argumento de la CLI `--environment` o `-e`. Si no tienes el navegador relevante instalado, Nightwatch intentará configurarlo por ti utilizando [Selenium Manager](https://www.selenium.dev/blog/2022/introducing-selenium-manager/).
    ```sh
    npx nightwatch test/index.ts -e firefox
    ```
:::tip
Ejecuta tus tests contra tu código de producción para que se asemejen más a tu sitio en vivo y desplegado.
:::

Más información sobre NightwatchJS se encuentra disponible en los siguientes enlaces:
  - [Introducción a Nightwatch](https://nightwatchjs.org/guide/overview/what-is-nightwatch.html)
  - [Testing con Nightwatch](https://nightwatchjs.org/guide/writing-tests/introduction.html)

## Playwright

Playwright es un framework de testing end-to-end para aplicaciones web modernas. Usa la API de Playwright en JavaScript o TypeScript para testear tu código de Astro en todos los motores de renderizado modernos incluyendo Chromium, Webkit y Firefox.

### Instalación

Puedes empezar y ejecutar tus tests usando la [Extensión de VS Code](https://playwright.dev/docs/getting-started-vscode).

Alternativamente, puedes instalar Playwright dentro de tu proyecto de Astro usando el gestor de paquetes de tu elección. Sigue los pasos de la CLI para elegir JavaScript/TypeScript, el nombre de tu carpeta de tests y añadir un workflow opcional de GitHub Actions.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm init playwright@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm dlx create-playwright
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn create playwright
  ```
  </Fragment>
</PackageManagerTabs>

### Cree su primer test con Playwright

1. Elige una página para testear. Este ejemplo probará la página de ejemplo `index.astro` a continuación.

    ```html title="src/pages/index.astro"
    ---
    ---
    <html lang="en">
      <head>
         <title>¡Astro es increíble!</title>
        <meta name="description" content="Trae contenido desde donde quieras y sírvelo rápidamente con la moderna arquitectura de islas de Astro." />
      </head>
      <body></body>
    </html>
    ```

2. Crea una nueva carpeta y añade el siguiente archivo de test en `src/test`. Copia y pega el siguiente test dentro del archivo para verificar que la meta información de la página es correcta. Actualiza el valor `<title>` de la página para que coincida con la página que se está testeando.

    ```jsx title="src/test/index.spec.ts" "¡Astro es increíble!"
    import { test, expect } from '@playwright/test';

    test('el titulo es correcto', async ({ page }) => {
      await page.goto("http://localhost:4321/");

      await expect(page).toHaveTitle('¡Astro es increíble!');
    });
    ```

    :::tip[Establecer una `baseUrl`]
    Puedes establecer [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) en el archivo de configuración `playwright.config.ts` para usar `page.goto("/")` en lugar de `page.goto("http://localhost:4321/")` para una URL más conveniente.
    :::

### Ejecutar los tests con Playwright

Puede ejecutar un solo test o varios tests a la vez, testeando en uno o en varios navegadores. Por defecto, los resultados de sus tests se muestran en la terminal. Si lo desea, puedes abrir el informe de tests HTML para visualizar un informe completo y filtrar los resultados de los tests.

1. Para ejecutar el test del ejemplo anterior desde la línea de comando, utilice el comando `test`. Opcionalmente, incluya el nombre del archivo para ejecutar solo ese test.

    ```sh
    npx playwright test index.spec.ts
    ```

2. Para ver el informe completo HTML, puedes hacerlo usando el siguiente comando:

    ```sh
    npx playwright show-report
    ```

:::tip
Ejecuta los tests con el código de producción para que se asemejen más a tu sitio activo.
:::

#### Avanzado: Lanzamiento de un servidor web de desarrollo durante los tests

Puede también hacer que Playwright inicie su servidor cuando ejecute su script de testing utilizando la opción [`webServer`](https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests)  en el archivo de configuración de Playwright.

Aquí un ejemplo de la configuración y los comandos necesarios cuando se utiliza npm:

1. Añade un script de test en el archivo `package.json` en la raíz del proyecto, como `"test:e2e": "playwright test"`.

2. En `playwright.config.ts`, añade el objeto `webServer` y actualiza el valor del comando `npm run preview`.

```js title="playwright.config.ts" ins={4-9} "npm run preview"
 import { defineConfig } from '@playwright/test';
 
 export default defineConfig({
   webServer: {
     command: 'npm run preview',
     url: 'http://localhost:4321/',
     timeout: 120 * 1000,
     reuseExistingServer: !process.env.CI,
   },
   use: {
     baseURL: 'http://localhost:4321/',
   },
 });
```

3. Ejecuta `npm run build`, luego ejecuta `npm run test:e2e` para ejecutar los tests de Playwright.

Más información sobre Playwright puedes encontrarla en los enlaces de abajo:

- [Cómo empezar con Playwright](https://playwright.dev/docs/intro)
- [Utilizar un servidor de desarrollo](https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests)
